<template>
  <div class="upload-img">
    <div>
      <el-upload
        v-if="row.status != '-1'"
        action=""
        accept=".jpg,.png,.jpeg"
        :show-file-list="false"
        :http-request="
          (file) => {
            uploadFile(file);
          }
        "
      >
        <el-button icon="el-icon-upload" size="small" type="primary">点击上传图片</el-button>
      </el-upload>
    </div>
    <div v-if="fileList.length > 0" style="margin-top: 10px">
      <div>
        <el-image style="width: 150px; max-height: 100px" :src="url" :preview-src-list="fileList"> </el-image>
      </div>
      <div class="">
        已上传<span class="picNum">{{ fileList.length }}</span
        >张图片，点击图片查看所有预览大图
      </div>
    </div>
  </div>
</template>

<script>
import { uploadPictureApi } from "api/evaluateApi";
import { umpUploadEvidenceApi } from "api/authApi";
export default {
  name: "uploadImg",
  props: {
    type: String,
    row: {
      type: Object,
      default: () => {},
    },
  },
  components: {},
  data() {
    return { url: "", fileList: [] };
  },
  computed: {},
  mounted() {},
  methods: {
    uploadFile(file) {
      // console.log(file);
      // console.log("row", this.row);
      const formData = new FormData();
      formData.append("files", file.file);
      if (this.type === "upm") {
        umpUploadEvidenceApi(formData).then((res) => {
          let data = res.data;
          this.row.evidence = data;
          console.log("res", res);
          this.$emit("uploadSuccess");
        });
      } else {
        uploadPictureApi(formData).then((res) => {
          let data = res.data;
          this.row.evidence = data;
          console.log("res", res);
          this.$emit("uploadSuccess");
        });
      }
    },
  },
  watch: {
    row: {
      deep: true,
      immediate: true,
      handler(newVal) {
        if (newVal.evidence?.length == 0) {
          this.fileList = [];
          this.url = "";
          return;
        }
        if (newVal.evidence && newVal.evidence.length > 0) {
          this.url = newVal.evidence[0].filePath;
          this.fileList = newVal.evidence.map((item) => item.filePath);
        }
      },
    },
  },
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.down-text {
  display: inline-block;
  color: $themeColor;
  margin-top: 10px;
}
::v-deep .el-upload-list {
  display: none;
}
.picNum {
  color: $themeColor;
  font-size: 14px;
  font-weight: 600;
}
</style>
